<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>优惠券</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .bgcolor-white{
            background-color: #fff;
        }
        .aui-tab .aui-active{
            color:#e02e24;
            border-bottom: 2px solid #e02e24;
        }
        .couponlist{
            margin: 0.2rem;
        }
        .couponlist .coupon-item{

            display: flex;
            justify-content: space-between;

         }
        .coupon-item .amount-title{
            font-size: 0.6rem;
            padding-left: 0.4rem;
        }
        .coupon-item .amount-price{
            text-align: center;
            font-size: 0.8rem;
            line-height: 2rem;
        }
        .coupon-item .item-descrip{
            font-size: 0.6rem;
         }
        .item-descrip .coupon-cond1{
            color:#757575;
        }
        .item-descrip .coupon-cond2{
            color: #000;
            font-size: 0.7rem;
        }
        .item-descrip .coupon-exp{
            color:#757575;
        }
        .item-descrip .exp-flag{
            text-align: right;
            color: #757575;
        }
        .border-used{
            border-left: 3px solid #d9d9d9;
            background-color: #fafafa;

        }
        .border-noused{
            border-left: 3px solid #00acc1;
            background-color: #fff;
        }
        .border-noused .exp-flag{
            color: #e02e24;
        }
    </style>
</head>
<body>

<div class="aui-content" id="coupon-box">
  <header class="aui-bar aui-bar-nav" id="header">
      <a class="aui-pull-left aui-btn" onclick="closewin();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">优惠券</div>
  </header>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item" :class="{'aui-active':status==0}" @click="opencoupon(0)">未使用</div>
        <div class="aui-tab-item" :class="{'aui-active':status==1}" @click="opencoupon(1)"> 已使用/已过期</div>
      </div>

</div>

<script language="javascript">


    var pvm = new Vue({
            el: '#coupon-box',
            data: {
                  status:0,
                token:'',
              },
            methods:{
                 opencoupon:function(status){
                   this.status=status;
                   var headerh = $api.dom("#coupon-box").offsetHeight;
                   $page.openfrm('home_coupon_frm'+this.status,'./coupon_frame.html',{x:0,y:headerh,h:api.winHeight-headerh},{status:this.status},false,true);
                 }

            }
        }
    );
    apiready=function(){
     
      pvm.token = $api.getStorage('token');
      $page.init();
      pvm.opencoupon(0);

    }

    </script>
</body>
</html>
